/*
 * slideshow.js - A simple javascript slide show engine for delivering
 * static (non-animated) presentations in HTML5-compatible browsers.
 *
 * Authored by Vitor Sonoki - http://sonokisworld.appspot.com
 * Licensed under the GNU GPL v3
 */

(function () {
    'use strict';

    var slides = document.querySelectorAll("section");

    // This stands for the target slide that we land on when the page is loaded:
    var target = parseInt(location.hash.split("p")[1]) || 1;

    window.addEventListener('hashchange', function() {
        // Handle the Slide Switching events.
        var pnum = parseInt(location.hash.split("p")[1]);
        navigate(pnum - 1);
    });

    window.addEventListener('keydown', function(e) {
       var current = parseInt(location.hash.split("p")[1]) || 1;
       // console.log(current);
        if (e.keyCode == 39) {
           if (current == slides.length) { return; }
           else {
               location.hash = "p" + (current + 1);
           }
       }
        else if (e.keyCode == 37) {
            if (current == 1) { return; }
            else {
                location.hash = "p" + (current - 1);
            }
        }
    });

    // Touch, swipe events section. Swipe left, advance
    // one slide. Swipe right, go back one slide.
    //
    // We have to put anchor as
    // a global-ish variable so that all three events can
    // access it:
    var anchor = 0;
    var dist = 0;
    window.addEventListener('touchstart', function(event) {
        var touch = event.changedTouches[0];
        anchor = touch.clientX;
        event.preventDefault();
    });

    window.addEventListener('touchmove', function(event) {
        var touch = event.changedTouches[0];
        dist = touch.clientX;
        event.preventDefault();
    });

    window.addEventListener('touchend', function(event) {
        var current = parseInt(location.hash.split("p")[1]) || 1;
        var delta = dist - anchor;
        if (delta < -25) {
            // Swipe left.
            location.hash = "p" + (current + 1);
        }
        if (delta > 25) {
            // Swipe right.
            location.hash = "p" + (current - 1);
        }
        dist = 0;
        anchor = 0;
        event.preventDefault();
    });

    // Mechanism to parse and show the slide according to the URL fragment.
    function navigate(page) {
        if (slides[page]) {
            for (var i=0; i < slides.length; i++) {
                slides[i].style.display = 'none';
            }
            slides[page].style.display = 'block';
            jumpTo.value = page + 1;
        }
        else {
            // If we're out of range, do nothing and remain in your seats.
            console.log("Slide doesn't exist!");
        }
    }

    // Create the UI that will let users know which slide they are in and navigate.
    var nav = document.createElement("nav");
    nav.style.position = "fixed";
    nav.style.width = "100%";
    nav.style.left = nav.style.bottom = "0px";
    nav.style.fontSize = "18pt";
    nav.style.background = "#DEDEDE";
    nav.style.textAlign = "center";
    nav.innerHTML = '<input type="text" id="counter" /> / ' + slides.length;
    document.body.appendChild(nav);
    
    var jumpTo = document.getElementById("counter");
    jumpTo.style.width = "35px";
    jumpTo.style.padding = "5px";
    jumpTo.style.fontSize = "18pt";
    jumpTo.value = target;
    jumpTo.onchange = function() {
        if (jumpTo.value > slides.length || jumpTo.value < 1 || isNaN(jumpTo.value)) { return; }
        location.hash = "p" + jumpTo.value.toString();
    };

    // Hide all the slides and start with the one in the URL, or if not specified, the first:
    if (target > slides.length) {
        navigate(0);
        if (target > slides.length) {
            location.hash = "p1";
        }
    }
    else {
        navigate(target - 1);
    }
}());
